<template>
    <el-input type="text" class="no-border" v-model="valueModel" :disabled="loading"></el-input>
</template>

<script setup lang="ts">

import {ref} from "vue";
import Layers from "@/lang/layers/index";

/**
 * 简洁输入框
 *
 * 不用的时候，显示成文本的样式，鼠标悬浮、聚焦的时候，显示为输入框，
 *
 * 类似于 邮箱、手机号 等常用字段，可以直接放到查看页中，允许客户随时编辑，而不需要放到专门的编辑页面
 *
 * 与其它输入框不同，当前输入框内容一般需要即时保存，提交过程用户无感
 */
interface Props {
    /** model-value */
    modelValue: string
    // 请求 URL
    url?: string;
    // 关键字
    key?: string;
    // 字段名
    name?: string;
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits(['update:modelValue', 'change']);

// 定义要触发的事件，用于更新 v-model 的值
const valueModel = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        if (props.url === undefined) {
            // 如果未定义 url，仍然作为普通输入框使用
            emit('update:modelValue', val);
            emit('change', val);
        } else {
            // 如果定义了 url，则提交到后台，数据响应后生效
            onchange(val);
        }
    }
});


// 数据正在提交
const loading = ref(false);

// 焦点消失，转为文本展示
const onchange = (value) => {
    if (loading.value === true) {
        return;
    }

    loading.value = true;
    Layers.ajax({
        url: props.url,
        method: 'PUT',
        params: {id: props.key, name: props.name, value: value}
    }).then(() => {
        emit('update:modelValue', value);
        emit('change', value);
        Layers.succeed('操作成功!');
    }).catch(err => {
        Layers.warn('数据保存失败!');
    }).finally(() => {
        loading.value = false;
    });
}
</script>

<style lang="scss" scoped>
</style>